// 滚动动画 - 优化性能、兼容性和视觉效果
(function() {
    // 检测浏览器是否支持 Intersection Observer API
    const supportsIntersectionObserver = 'IntersectionObserver' in window;
    
    // 动画元素选择器
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    
    // 动画配置
    const animationConfig = {
        // 动画延迟时间（毫秒）
        delay: 150,
        // 动画持续时间（毫秒）
        duration: 600,
        // 动画缓动函数
        easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        // 视口交叉阈值
        threshold: 0.1
    };
    
    // 检查元素是否已加载（用于图片）
    function isElementLoaded(element) {
        if (element.tagName === 'IMG') {
            return element.complete && element.naturalHeight !== 0;
        }
        return true;
    }
    
    // 为元素应用动画
    function animateElement(element) {
        // 跳过已动画的元素
        if (element.classList.contains('animated')) return;
        
        // 获取元素上的自定义动画配置
        const elementDelay = element.dataset.animationDelay || animationConfig.delay;
        const elementDuration = element.dataset.animationDuration || animationConfig.duration;
        
        // 设置动画样式
        element.style.opacity = '0';
        element.style.transform = 'translateY(30px)';
        element.style.transition = `opacity ${elementDuration}ms ${animationConfig.easing}, transform ${elementDuration}ms ${animationConfig.easing}`;
        element.style.transitionDelay = `${elementDelay}ms`;
        
        // 触发重排后应用动画
        setTimeout(() => {
            element.style.opacity = '1';
            element.style.transform = 'translateY(0)';
        }, 10);
        
        // 标记为已动画
        element.classList.add('animated');
    }
    
    // 使用 Intersection Observer（现代浏览器）
    if (supportsIntersectionObserver) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && isElementLoaded(entry.target)) {
                    animateElement(entry.target);
                    // 停止观察已动画的元素
                    observer.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: '0px 0px -10% 0px', // 元素顶部进入视口10%时触发
            threshold: animationConfig.threshold
        });
        
        // 开始观察所有元素
        animateElements.forEach(element => {
            observer.observe(element);
        });
    } 
    // 回退到滚动事件（旧浏览器）
    else {
        let ticking = false;
        
        function checkInView() {
            if (!ticking) {
                window.requestAnimationFrame(() => {
                    animateElements.forEach(element => {
                        if (element.classList.contains('animated')) return;
                        
                        const rect = element.getBoundingClientRect();
                        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
                        
                        // 元素顶部进入视口底部10%时触发
                        if (rect.top < windowHeight * 0.9 && rect.bottom > 0 && isElementLoaded(element)) {
                            animateElement(element);
                        }
                    });
                    ticking = false;
                });
                ticking = true;
            }
        }
        
        // 初始检查
        checkInView();
        
        // 滚动时检查（使用节流）
        window.addEventListener('scroll', checkInView);
        
        // 窗口大小改变时检查
        window.addEventListener('resize', checkInView);
        
        // 图片加载完成时检查
        document.querySelectorAll('img.animate-on-scroll').forEach(img => {
            if (!img.complete) {
                img.addEventListener('load', checkInView);
            }
        });
    }
})();    